<template>
  <div class="swiper">
    <el-carousel :height="height">
      <el-carousel-item v-for="(v,k) in list" :key="k">
        <div class="shop_banner" :style="'background-size:100%;background-position: center;background-image:url('+v.pictureurl+');'"><router-link :to="v.adv_link||'#'"><div style="width:1200px;height:450px;display:block;"></div></router-link></div>
      </el-carousel-item>
    </el-carousel>
    <div class="search flex flex-row" style="position:absolute;top: 50%; left: 50%; transform: translate(-50%, -50%);z-index: 800;">
      <div class="inputlable">
        <el-select v-model="queryList.queryOption" placeholder="全站搜索">
          <el-option
            v-for="item in QueryOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="inputcontent">
        <el-input v-model="queryList.searchKey" placeholder="搜索园区、行业"></el-input>
      </div>
      <div class="sousuobutton" @click="handleFilter" style="cursor: pointer;">
        搜索
      </div>
    </div>
  </div>
</template>

<script>
export default {
    components: {},
    props: {
        list:{
            type:Array,
        },
        height:{
            type:String,
            default:'339px',
        },
    },
    data() {
      return {
        queryList: {
          queryOption: 0,
          searchKey: ''
        },
        QueryOptions: [{
          value: 0,
          label: '园区'
        },{
          value: 1,
          label: '项目'
        },{
          value: 2,
          label: '资讯'
        }]
      };
    },
    watch: {},
    computed: {},
    methods: {
      handleFilter() {
        if (this.queryList.queryOption === 0) {
          this.$router.push({ name: 'yuanqu-list', query: { searchKey: this.queryList.searchKey } })
        } else if (this.queryList.queryOption === 1) {
          this.$router.push({ name: 'project-list', query: { searchKey: this.queryList.searchKey } })
        } else if (this.queryList.queryOption === 2) {
          this.$router.push({ name: 'news-list', query: { searchKey: this.queryList.searchKey } })
        }
      }
    },
    created() {},
    mounted() {}
};
</script>
<style lang="scss">
.swiper {
  position: relative;

  .search {
    width: 560px;
    background: #FFFFFF;
    position: relative;
  }

  .search .inputlable {
    font-size: 0.875rem;
    font-family: PingFangHK-Medium, PingFangHK;
    font-weight: 500;
    color: #5D6069;
    line-height: 1.25rem;
    border-right: 0.0625rem solid #EFEFEF;

    .el-select {
      .el-input {
        .el-input__inner {
          width: 122px;
          border: 0;
        }
      }
    }
  }

  .search .inputcontent {
    font-size: 0.875rem;
    font-family: PingFangHK-Semibold, PingFangHK;
    font-weight: 600;
    color: #CBCDD1;
    line-height: 1.25rem;

    .el-input {
      .el-input__inner {
        border: 0;
      }
    }
  }

  .search .sousuobutton {
    background: #FE7743;
    font-size: 0.625rem;
    font-family: PingFangHK-Semibold, PingFangHK;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 0.875rem;
    padding: 0.4375rem 0.6875rem;
    margin: 0.3125rem;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
  }
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}
.shop_banner{
    height: 100%;
    background-position: center;
}
</style>